<script>
export default {
  data () {
    const ckeckEmail = (rule, value, callback) => {
      if (!value.trim()) return callback(new Error('邮箱不能为空'))
      if (/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(value)) {
        callback()
      } else {
        callback(new Error('邮箱格式不正确'))
      }
    }
    return {
      userList: [],
      infouser: {
        query: '', // 查询参数
        pagenum: 1,
        pagesize: 2
      },
      total: 0,
      dialogVisible: false,
      // 表单对象
      addForm: {
        username: '',
        email: '',
        password: '',
        mobile: ''
      },
      // 验证规则
      addFormRol: {
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        email: [
          { validator: ckeckEmail, trigger: 'blur' },
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ]
      },
      // 用户修改
      checkdialogVisible: false,
      checkuser: {
        username: '',
        email: '',
        mobile: ''
      },
      checkuserRul: {
        username: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        email: [
          { validator: ckeckEmail, trigger: 'blur' },
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getuserList()
  },
  methods: {
    async getuserList () {
      const {data: res} = await this.$http.get('users', {params: this.infouser})
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取失败')
      this.userList = res.data.users
      this.total = res.data.total
    },
    handleSizeChange (newSize) {
      this.infouser.pagesize = newSize
      this.getuserList()
    },
    handleCurrentChange (newpage) {
      this.infouser.pagenum = newpage
      this.getuserList()
    },
    addFormClose () {
      this.$refs.addFormRef.resetFields()
    },
    // 添加用户
    async adduser () {
      const {data: res} = await this.$http.post('users', this.addForm)
      // console.log(res)
      if (res.meta.status !== 201) return this.$message.error('创建失败')
      this.$message.success('创建成功')
      this.dialogVisible = false
      this.getuserList()
    },
    // 更改用户
    async checkusers (checkid) {
      const {data: res} = await this.$http.get('users/' + checkid)
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取信息失败')
      this.checkuser = res.data
      this.checkdialogVisible = true
    },
    checkClose () {
      this.$refs.checkuserRef.resetFields()
    },
    check () {
      this.$refs.checkuserRef.validate(async valid => {
        if (!valid) return
        const {data: res} = await this.$http.put('users/' + this.checkuser.id, {email: this.checkuser.email, mobile: this.checkuser.mobile})
        console.log(res)
        if (res.meta.status !== 200) return this.$message.error('修改失败')
        this.$message.success('修改成功')
        this.checkuser = res.data
        this.checkdialogVisible = false
        this.getuserList()
      })
    },
    // 删除用户
    async remove (id) {
      const flag = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      console.log(flag)
      if (flag !== 'config') return this.$message.info('取消删除')
      const {data: res} = await this.$http.delete('users/' + id)
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('删除失败')
      this.$message.success('删除成功')
      this.getuserList()
    }
  }
}
</script>
